<template>
   <div class="wrap">
      <div class="el_input">
        <el-input v-model="startUserName" @keyup.enter.native="getListData" placeholder="请输入发起人"></el-input>
      </div>
      <el-table
          :data="listData"
          @row-click="handleClick"
          v-loading="loading"
          style="width: 100%"
          height="250">
          <el-table-column
            fixed
            prop="serialNumber"
            label="审批编号"
            width="150">
          </el-table-column>

          <el-table-column
            prop="startUser"
            label="发起人"
            width="150">
          </el-table-column>
          <el-table-column
            prop="schemeName"
            label="审批类型"
            width="120">
          </el-table-column>
          <el-table-column
            prop="status"
            label="审批状态"
            width="120">
              <template slot-scope="scope">
                <span style="color:#e64d4d" v-if="scope.row.status==0">审批拒绝</span>
                <span style="color:#49c152" v-else-if="scope.status==1">审批通过</span>
                <span style="color:#fd9a07" v-else>审批中</span>
              </template>
          </el-table-column>


          <el-table-column
            prop="data.F_Vehicle"
            label="交通工具"
            width="120">
          </el-table-column>
          
          <el-table-column
            prop="data.F_Onewayroundtrip"
            label="单程/往返"
            width="120">
          </el-table-column>
          <el-table-column
            prop="data.F_FromCityName"
            label="出发城市"
            width="120">
          </el-table-column>
          <el-table-column
            prop="data.F_GoCityName"
            label="目的城市"
            width="120">
          </el-table-column>
          <el-table-column
            prop="data.F_StartTime"
            label="开始时间"
            width="120">
          </el-table-column>
          <el-table-column
            prop="data.F_EndTime"
            label="结束时间"
            width="120">
          </el-table-column>
          <el-table-column
            prop="data.F_TravelDays"
            label="出差时长"
            width="120">
          </el-table-column>
          <el-table-column
            prop="data.F_Remarks"
            label="出差备注"
            width="120">
          </el-table-column>
          <el-table-column
            prop="data.F_Reasons"
            label="出差理由"
            width="120">
          </el-table-column>
      </el-table>
      <div class="el-pagination">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          layout="total,prev, pager, next"
          :total="total">
        </el-pagination>
      </div>
    </div>
</template>
<script>
  import { baseUrl } from "@/config/env";
  import request from "@/router/axios";
export default {
  data(){
    return{
      listData:[],
      total:0,
      limit:1,
      size:5,
      startUserName:'',
      loading:false
    }
  },
  async mounted(){
    await this.getListData()
  },
  methods:{
    getListData(){
      let params = {
        limit:this.limit,
        size:this.size,
        startUserName:this.startUserName,
        approvalType:'出差',
      }
      this.loading = true
      request({
          url: baseUrl + '/workflow-task/listTaskByUserId',
          method: 'get',
          params: params
      }).then(res =>{
        if(res.data.success){
          this.loading = false
          this.listData = res.data.data.Rows
          this.total = res.data.data.Total
        }
      })
    },
    handleClick(v){
      this.$emit('value',v)
    },
    handleCurrentChange(currentPage){
      this.limit = currentPage
      this.getListData()
    },
  }
}
</script>

<style scoped>

  /* 关联审批单开始 */
  ::v-deep .el-dialog__footer{
    border-top: 1px solid #eee;
  }
  .height16{
    height: 16px;
  }
  .el_input{
    height: 32px;
    margin: 8px 16px;
  }
  .el-pagination{
    width: 100%;
    height: 32px;
    text-align: center;
  }
</style>